import React from 'react';
import { Spin, Empty, Button, Row, Col, Table } from 'antd';
import { SyncOutlined, CodeOutlined } from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';

interface LanguageStatisticsProps {
    languageData: any[];
    languageLoading: boolean;
    loadLanguageData: () => void;
}

const LanguageStatistics: React.FC<LanguageStatisticsProps> = ({
    languageData,
    languageLoading,
    loadLanguageData
}) => {
    return (
        <div
            style={{
                background: '#ffffff',
                borderRadius: '12px',
                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
                border: '1px solid #e2e8f0',
                overflow: 'hidden',
                position: 'relative',
                marginTop: '20px'
            }}
        >
            {/* 彩色顶部装饰条 */}
            <div style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '4px',
                background: 'linear-gradient(90deg, #8b5cf6 0%, #3b82f6 25%, #10b981 50%, #f59e0b 75%, #ef4444 100%)'
            }} />

            <div style={{ padding: '16px' }}>
                {/* 标题区域 */}
                <div style={{
                    marginBottom: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between'
                }}>
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '12px'
                    }}>
                        <div style={{
                            width: '32px',
                            height: '32px',
                            borderRadius: '8px',
                            background: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            boxShadow: '0 4px 12px rgba(139, 92, 246, 0.25)'
                        }}>
                            <CodeOutlined style={{
                                fontSize: '16px',
                                color: '#fff'
                            }} />
                        </div>
                        <div>
                            <h2 style={{
                                margin: 0,
                                fontSize: '16px',
                                fontWeight: '700',
                                color: '#1e293b',
                                lineHeight: '1.2'
                            }}>
                                语言统计信息
                            </h2>
                            <p style={{
                                margin: '2px 0 0 0',
                                fontSize: '12px',
                                color: '#64748b',
                                fontWeight: '500'
                            }}>
                                代码语言构成分析
                            </p>
                        </div>
                    </div>
                    <Button
                        type="text"
                        size="large"
                        onClick={loadLanguageData}
                        loading={languageLoading}
                        icon={<SyncOutlined />}
                        style={{
                            borderRadius: '12px',
                            border: '1px solid rgba(148, 163, 184, 0.2)',
                            color: '#64748b',
                            height: '48px',
                            padding: '0 24px',
                            fontSize: '14px',
                            fontWeight: '600'
                        }}
                    >
                        刷新数据
                    </Button>
                </div>

                {languageLoading ? (
                    <div style={{ textAlign: 'center', padding: '80px' }}>
                        <Spin size="large" />
                        <div style={{
                            marginTop: '24px',
                            fontSize: '16px',
                            color: '#64748b',
                            fontWeight: '500'
                        }}>
                            正在加载语言统计数据...
                        </div>
                    </div>
                ) : languageData && languageData.length > 0 ? (
                    <Row gutter={32}>
                        {/* 左侧：现代化饼图展示 */}
                        <Col span={12}>
                            <LanguagePieChart languageData={languageData} />
                        </Col>

                        {/* 右侧：现代化表格展示 */}
                        <Col span={12}>
                            <LanguageTable languageData={languageData} />
                        </Col>
                    </Row>
                ) : (
                    <div style={{
                        textAlign: 'center',
                        padding: '80px',
                        background: 'rgba(248, 250, 252, 0.5)',
                        borderRadius: '16px',
                        border: '2px dashed rgba(148, 163, 184, 0.3)'
                    }}>
                        <Empty
                            description={
                                <span style={{
                                    color: '#64748b',
                                    fontSize: '16px',
                                    fontWeight: '500'
                                }}>
                                    暂无语言统计数据
                                </span>
                            }
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

// 语言饼图组件
const LanguagePieChart: React.FC<{ languageData: any[] }> = ({ languageData }) => {
    const colors = [
        '#3b82f6', '#10b981', '#f59e0b',
        '#ef4444', '#8b5cf6', '#06b6d4',
        '#84cc16', '#f97316', '#ec4899'
    ];

    return (
        <div style={{ padding: '12px 0' }}>
            <h3 style={{
                textAlign: 'center',
                marginBottom: '16px',
                color: '#1e293b',
                fontSize: '16px',
                fontWeight: '700'
            }}>
                语言分布概览
            </h3>
            <div style={{
                height: '280px',
                padding: '20px',
                background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
                borderRadius: '16px',
                border: '1px solid rgba(148, 163, 184, 0.1)'
            }}>
                <ReactECharts
                    option={{
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}: {c} 行 ({d}%)',
                            backgroundColor: 'rgba(255, 255, 255, 0.95)',
                            borderColor: '#e2e8f0',
                            borderWidth: 1,
                            textStyle: { fontSize: 13 }
                        },
                        legend: {
                            show: false
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['45%', '75%'],
                                center: ['50%', '50%'],
                                avoidLabelOverlap: false,
                                padAngle: 2,
                                itemStyle: {
                                    borderRadius: 8,
                                    borderColor: '#fff',
                                    borderWidth: 3,
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 8
                                },
                                label: {
                                    show: true,
                                    fontSize: 13,
                                    fontWeight: '600',
                                    formatter: '{b}\n{d}%',
                                    color: '#1e293b'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 16,
                                        fontWeight: '700'
                                    },
                                    itemStyle: {
                                        shadowBlur: 16,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                                    }
                                },
                                data: languageData.map((lang: any, index: number) => ({
                                    value: lang.totalLines,
                                    name: lang.language,
                                    itemStyle: {
                                        color: colors[index % colors.length]
                                    }
                                }))
                            }
                        ]
                    }}
                    style={{ height: '100%', width: '100%' }}
                    opts={{ renderer: 'canvas' }}
                />
            </div>
        </div>
    );
};

// 语言表格组件
const LanguageTable: React.FC<{ languageData: any[] }> = ({ languageData }) => {
    const colors = [
        '#3b82f6', '#10b981', '#f59e0b',
        '#ef4444', '#8b5cf6', '#06b6d4',
        '#84cc16', '#f97316', '#ec4899'
    ];

    const dataSource = languageData.map((lang: any, index: number) => ({
        key: index.toString(),
        language: lang.language,
        files: lang.fileCount,
        lines: lang.totalLines,
        percentage: lang.percentage,
        color: colors[index % colors.length]
    }));

    return (
        <div style={{ padding: '12px 0' }}>
            <h3 style={{
                marginBottom: '16px',
                color: '#1e293b',
                fontSize: '16px',
                fontWeight: '700'
            }}>
                详细统计数据
            </h3>
            <div style={{
                background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
                borderRadius: '16px',
                padding: '12px',
                border: '1px solid rgba(148, 163, 184, 0.1)',
                height: '280px',
                overflow: 'auto'
            }}>
                <Table
                    dataSource={dataSource}
                    columns={[
                        {
                            title: <span style={{ fontWeight: '700', color: '#374151' }}>语言</span>,
                            dataIndex: 'language',
                            key: 'language',
                            render: (text: string, record: any) => (
                                <div style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '12px'
                                }}>
                                    <div
                                        style={{
                                            width: '14px',
                                            height: '14px',
                                            borderRadius: '50%',
                                            backgroundColor: record.color,
                                            boxShadow: `0 0 8px ${record.color}40`
                                        }}
                                    />
                                    <span style={{
                                        fontWeight: '600',
                                        color: '#1e293b',
                                        fontSize: '14px'
                                    }}>
                                        {text}
                                    </span>
                                </div>
                            )
                        },
                        {
                            title: <span style={{ fontWeight: '700', color: '#374151' }}>文件数</span>,
                            dataIndex: 'files',
                            key: 'files',
                            align: 'center' as const,
                            render: (value: number) => (
                                <span style={{
                                    color: '#64748b',
                                    fontWeight: '600',
                                    fontSize: '14px'
                                }}>
                                    {value}
                                </span>
                            )
                        },
                        {
                            title: <span style={{ fontWeight: '700', color: '#374151' }}>代码行</span>,
                            dataIndex: 'lines',
                            key: 'lines',
                            align: 'center' as const,
                            render: (value: number) => (
                                <span style={{
                                    fontWeight: '700',
                                    color: '#1e293b',
                                    fontSize: '14px'
                                }}>
                                    {value.toLocaleString()}
                                </span>
                            )
                        },
                        {
                            title: <span style={{ fontWeight: '700', color: '#374151' }}>占比</span>,
                            dataIndex: 'percentage',
                            key: 'percentage',
                            align: 'center' as const,
                            render: (value: number, record: any) => (
                                <div style={{
                                    padding: '6px 12px',
                                    borderRadius: '20px',
                                    background: `${record.color}15`,
                                    border: `1px solid ${record.color}30`,
                                    display: 'inline-block'
                                }}>
                                    <span style={{
                                        color: record.color,
                                        fontWeight: '700',
                                        fontSize: '13px'
                                    }}>
                                        {value.toFixed(1)}%
                                    </span>
                                </div>
                            )
                        }
                    ]}
                    pagination={false}
                    size="small"
                    showHeader={true}
                    style={{
                        background: 'transparent',
                        border: 'none'
                    }}
                    className="modern-table"
                />
            </div>
        </div>
    );
};

export default LanguageStatistics;
